// !#1 引入 React 核心包
// import React from 'react'
// !#2 负责渲染的包（虚拟 DOM 转真实 DOM 并渲染）
import ReactDOM from 'react-dom/client'

// !#3 创建一个虚拟 DOM

// a + b
// a
// a > 3 ? true : false
// [1, 2].map(item => item * 2)
// function fn() {return 8} fn()
// console.log(if(true) {})
// console.log(for(let i = 0; i < 8; i++) {})

const username = 'ifer'
const obj = { address: '河南', age: 30 }
const arr = ['apple', 'orange']
const fn = () => 'Hello React'
// React.createElement("h1", null, "JSX");
const h1Jsx = <h1>JSX</h1>
// 数组里面装了一堆 JSX
const arrJsx = [<li>Vue</li>, <li>React</li>, <li>Angular</li>]
const wrapEle = (
  <div>
    {/* 普通变量 */}
    <p>username: {username}</p>
    {/* 对象中的属性 */}
    <p>address: {obj.address}</p>
    {/* 对象虽然也是表达式，但是不是在 {} 号中使用 */}
    {/* //!Objects are not valid as a React child : 意味着你肯定在大括号中使用对象了 */}
    {/* <p>对象:{obj}</p> */}
    {/* 数组中的某一项 */}
    <p>apple: {arr[0]}</p>
    {/* 甚至整个数组 */}
    <p>apple: {arr}</p>
    <p>arr: {arr.join('~')}</p>
    {/* 函数本身也是表达式，但是也不能直接在 {} 中用 */}
    {/* <p>{fn}</p> */}
    <p>{fn()}</p>
    {/* JSX 本身也是表达式 */}
    {h1Jsx}
    {arrJsx[0]}
  </div>
)

// !#4 把虚拟 DOM 渲染到页面
// 渲染到哪儿、渲染谁
ReactDOM.createRoot(document.querySelector('#root')).render(wrapEle)
